<template>
    <!-- 地图，后期封装 -->
    <div>
        <div id="mapDiv" :style="{'width':width,'height':height}"></div>
        <div class="area-row" v-if="showArea">
            <div class="area-item" @click="showOver(false)" :class="{'active':(areaActive==false)}">全部</div>
            <div class="area-item" v-for="(area,index) in aresList" :class="{'active':(areaActive==area.area_name)}"
                @click="showOver(area)">{{area.area_name}}</div>
        </div>
    </div>
    <!-- 地图，后期封装 -->
</template>
<script>
    import { goodsData, reserve } from '@/tempData/物资.js'
    import mapOverL from '@/tempData/mapData.js'
    import { getRandomColor } from '@/utils/public.js'
    export default {
        props:{
            'width':{
                type:String,
                default:"100vw"
            },
            'height':{
                type:String,
                default:'70vh'
            },
            'showArea':{
                type:Boolean,
                default:true
            },
            'markersList':{
                type:Array,
                default:()=>[]
            }
        },
        data() {
            return {
                reserve, markers: [], infoWindows: [], areaActive: false,mapOverL,aresList:[]
            }
        },
        mounted() {
            this. initMap();
        },
        methods: {
            //显示与隐藏图层
            showOver(area) {
                if (area == false) {
                    this.areaActive = '';
                    this.aresList.map((item, index) => {
                        item.polygon.show();
                        item.line.show();
                    })
                    return;
                }
                this.aresList.map((item, index) => {
                    item.polygon.hide();
                    item.line.hide();
                })
                this.areaActive = area.area_name;
                area.line.show()
                area.polygon.show()
            },
            //设置中心点
            centerAndZoom(lng = 113.05, lat = 22.68, size = 11) {
                this.map.centerAndZoom(new T.LngLat(lng, lat), size);
            },
            addMarkers() {
                if(this.markersList.length==0){return}
                this.markersList.map((item, index) => {
                    const lola = new T.LngLat(item.lngLat[0], item.lngLat[1]);
                    this.markers[index] = new T.Marker(lola);
                    this.infoWindows[index] = new T.InfoWindow();
                    this.infoWindows[index].setContent(item.content);
                    this.map.addOverLay(this.markers[index]);
                    this.markers[index].addEventListener("click", () => {
                        this.markers[index].openInfoWindow(this.infoWindows[index])
                    })
                });
            },
            initMap() {
                this.map = new T.Map("mapDiv");
                this.centerAndZoom();
                this.init_overlay();
                this.addMarkers();
            },
            //添加覆盖物
            init_overlay() {
                this.mapOverL.map((item, index) => {
                    let PolygonList = [];
                    let points = [];
                    item.geometry.coordinates[0].map((lt_list, index2) => {
                        //lt 经纬度
                        lt_list.map((lt, index3) => {
                            PolygonList.push(new T.LngLat(lt[0], lt[1]))
                            points.push(new T.LngLat(lt[0], lt[1]));
                        })
                    });

                    let polygon = new T.Polygon(PolygonList, { 'color': getRandomColor(), weight: 0, opacity: 0.7 });
                    this.map.addOverLay(polygon);
                    var line = new T.Polyline(points, { 'color': 'blue', 'weight': 2 });
                    this.map.addOverLay(line);
                    this.aresList.push({ "area_name": item.properties.name, polygon, line });
                })
            }

        },
    }
</script>